<template>
  <div
    class="plate"
    :style="{
      position
    }"
    :class="{'showBorder':showBorder}"
  >
    <div
      v-if="showAngle"
      class="angle"
    >
      <i
        v-if="showTopAngle"
        class="triangle-top-left horizontal"
      />
      <i
        v-if="showTopAngle"
        class="triangle-top-left vertical"
      />
      <i
        v-if="showTopAngle"
        class="triangle-top-right horizontal"
      />
      <i
        v-if="showTopAngle"
        class="triangle-top-right vertical"
      />
      <i
        v-if="showBottomAngle"
        class="triangle-bottom-left horizontal"
      />
      <i
        v-if="showBottomAngle"
        class="triangle-bottom-left vertical"
      />
      <i
        v-if="showBottomAngle"
        class="triangle-bottom-right horizontal"
      />
      <i
        v-if="showBottomAngle"
        class="triangle-bottom-right vertical"
      />
    </div>
    <slot />
  </div>
</template>
<script>
export default {
  name: 'Plate',
  props: {
    position: {
      type: String,
      default: 'relative'
    },
    showAngle: {
      type: Boolean,
      default: true
    },
    showTopAngle: {
      type: Boolean,
      default: true
    },
    showBottomAngle: {
      type: Boolean,
      default: true
    },
    showBorder: {
      type: Boolean,
      default: true
    },
    opacity: {
      type: Number,
      default: 1
    }
  }
}
</script>
<style lang="scss" scoped>
.plate{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  &.showBorder{
    border: 1px solid #295176;
  }
  .angle{
    >i{
      display: inline-block;
      &.vertical{
        width: 3px;
        height: 54px;
      }
      &.horizontal{
        height: 3px;
        width: 54px;
      }
      &.triangle-top-left{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        &.vertical{
          background: linear-gradient(to bottom,rgba(61, 152, 228, 1) 20%, rgba(61, 152, 228, 0) 90%)
        }
        &.horizontal{
          background: linear-gradient(to right,rgba(61, 152, 228, 1) 20%, rgba(61, 152, 228, 0) 90%)
        }
      }
      &.triangle-top-right{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        &.vertical{
          background: linear-gradient(to bottom,rgba(61, 152, 228, 1) 20%, rgba(61, 152, 228, 0) 90%)
        }
        &.horizontal{
          background: linear-gradient(to right,rgba(61, 152, 228, 0) 10%, rgba(61, 152, 228, 1) 80%)
        }
      }
      &.triangle-bottom-left{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        &.vertical{
          background: linear-gradient(to bottom,rgba(61, 152, 228, 0) 10%, rgba(61, 152, 228, 1) 80%)
        }
        &.horizontal{
          background: linear-gradient(to right,rgba(61, 152, 228, 1) 20%, rgba(61, 152, 228, 0) 90%)
        }
      }
      &.triangle-bottom-right{
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 10;
        &.vertical{
          background: linear-gradient(to bottom,rgba(61, 152, 228, 0) 10%, rgba(61, 152, 228, 1) 80%)
        }
        &.horizontal{
          background: linear-gradient(to right,rgba(61, 152, 228, 0) 10%, rgba(61, 152, 228, 1) 80%)
        }
      }
    }
  }
}
</style>
